  <template>
    <view class="barriergate">
		<u-navbar
			title="车牌号查询"
			:border-bottom="false"  
		></u-navbar>
       <view class="barriergate__input-box" @click="carInputClick">
<!-- 		   <u-input v-model="plateNum"
					placeholder="请输入车牌号"
					:focus="isCursor"></u-input> -->
		  <view class="barriergate__input-box__plateNum">
				<view class="barriergate__input-box__plateNum__text">{{plateNum}}</view>
				<view class="barriergate__input-box__plateNum__cursor" v-show="isCursor">
					<image class="barriergate__input-box__plateNum__cursor__icon"  src="/static/icon/cursor.svg" mode="aspectFit" />
				</view>
		  </view>

		  <view class="barriergate__input-box__submit" @click="submit">查询</view>
        </view>
		
        <!-- 引用车牌组件 -->
        <plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>

    </view>
</template>
<script>
    import plateNumber from '../../../../components/plate-number/plateNumber.vue'

    export default {
        components:{plateNumber},
        data() {
            return {
                plateNum: '', //输入的车牌号
                isCursor: true, //是否显示焦点
            };
        },
        onHide() {
            //恢复初始化
            this.plateNum = '';
        },
        mounted() {
            //初始化
            this.$refs.plate.init();
            this.carInputClick();
        },
        methods: {
            showOrHide(falg) {
                this.isCursor = falg;
            },
            carInputClick() {
				this.isCursor=true;
                this.$refs.plate.show();
            },
            submit() {
                //输入了正确的车牌才执行请求
                // if (this.plateNum.length > 6) {
                //     this.$refs.plate.close();

                //     //增加车牌方法
                //     uni.showToast({
                //         title: '车牌:'+this.plateNum,
                //         duration: 2000
                //     });
                // } else {
                //     uni.showToast({
                //         title: '请输入正确的车牌号',
                //         duration: 2000
                //     });
                // }
				uni.navigateTo({
					url:"/pages/core/mine/barriergate/pay"
				})
            }
        }
    }
	</script>
	<style lang="less">
	@keyframes myAnimation {
		from {
			opacity: 1.0;
		}
		50% {
			opacity: 0.4;
		}
		70%{
			opacity: 1;
		}
		to {
			opacity: 1.0;
		}
	}
	.barriergate{
		&__input-box{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-left: @uni-spacing-col-lg;
			margin-right: @uni-spacing-col-lg;
			margin-top: @uni-spacing-row-lg;
			height: 40px;
			border: @line-border-size solid @uni-border-color;
			border-radius: @uni-border-radius-base;
			background-color: #fff;
			&__plateNum{
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: @uni-font-size-lg;
				margin: @uni-spacing-row-lg;
				&__test{
					
				}
				&__cursor{
					height: @uni-font-size-lg;
					width: @uni-font-size-lg;
					animation: myAnimation 1s infinite;
					&__icon{
						width: 100%;
						height: 100%;
					}
				}
			}
			
			&__submit{
				padding-left: @uni-spacing-col-lg;
				padding-right: @uni-spacing-row-lg;
				border-left: 1px solid @uni-border-color ;
				font-size: @uni-font-size-lg;
			}
			
		}
	}
	</style>